<template>
    <div class="sidebar-container" :class="settingsStore.sidebarStyle">
      <div v-if="settingsStore.showLogo" class="logo-container" :class="{ 'dark': settingsStore.theme === 'dark' }">
        <Logo :size="32" class="logo-icon" :color="settingsStore.themeColor" />
        <span v-show="!isCollapse" class="logo-text" :class="{ 'light': settingsStore.theme === 'dark' ? false : settingsStore.sidebarStyle === 'light' }">{{ settings.title }}</span>
      </div>
      <el-scrollbar>
        <el-menu style="height: 100%;"
          :default-active="activeMenu"
          :collapse="isCollapse"
          :background-color="settingsStore.theme === 'dark' ? '#1d1e1f' : (settingsStore.sidebarStyle === 'light' ? '#ffffff' : '#304156')"
          :text-color="settingsStore.theme === 'dark' ? '#bfcbd9' : (settingsStore.sidebarStyle === 'light' ? '#303133' : '#bfcbd9')"
          :active-text-color="settingsStore.themeColor"
          :collapse-transition="false"
          @select="handleSelect"
          :unique-opened="true"
        >
          <template v-for="route in menuRoutes" :key="route.path">
            <menu-item v-if="!route.meta?.hidden" :route="route" :base-path="route.path" />
          </template>
        </el-menu>
      </el-scrollbar>
    </div>
  </template>
  
  <script setup lang="ts">
  import { computed } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { usePermissionStore } from '@/store/modules/permission'
  import { useSettingsStore } from '@/store/modules/settings'
  import Logo from '@/layouts/components/Sidebar/Logo.vue'
  import settings from '@/config/settings'
  import { isExternal } from '@/utils/validate'
  import MenuItem from './MenuItem.vue'
  
  const route = useRoute()
  const permissionStore = usePermissionStore()
  const settingsStore = useSettingsStore()
  const router = useRouter()
  // 从 props 接收折叠状态
  defineProps({
    isCollapse: {
      type: Boolean,
      default: false
    }
  })
  
  // 获取路由菜单
  const menuRoutes = computed(() => {
    const routes = permissionStore.routes
    return routes.map(route => {
      // 如果是根路由且包含 dashboard 子路由
      if (route.path === '/' && route.children) {
        const dashboardRoute = route.children.find(child => child.path === 'dashboard')
        if (dashboardRoute) {
          // 将 dashboard 提升为一级路由
          return {
            path: '/dashboard',
            ...dashboardRoute,
            children: undefined
          }
        }
      }
      return route
    })
  })
  // 当前激活的菜单
  const activeMenu = computed(() => {
    const { meta, path } = route
    if (meta?.activeMenu) {
      return meta.activeMenu
    }
    return path
  })
  
  // 修改路径处理函数
  const resolvePath = (routePath: string) => {
    // 如果是外部链接，直接返回原路径
    if (isExternal(routePath)) {
      return routePath
    }
    
    // 如果是根路径，直接返回
    if (routePath === '/') return routePath
    
    // 移除开头和结尾的斜杠
    routePath = routePath.replace(/^\/+|\/+$/g, '')
    
    // 如果是仪表盘路径，特殊处理
    if (routePath === 'dashboard') {
      return '/dashboard'
    }
    
    // 其他路径，确保只有一个斜杠
    return '/' + routePath
  }
  
  // 添加 select 事件处理函数
  const handleSelect = (index: string) => {
    if (isExternal(index)) {
      window.open(index, '_blank')
      return
    }
    
    // 内部路由跳转
    if (route.path !== index) {
      router.push(index)
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .sidebar-container {
    height: 100%;
    background-color: v-bind('settingsStore.theme === "dark" ? "#1d1e1f" : (settingsStore.sidebarStyle === "light" ? "#ffffff" : "#304156")');
    
    .logo-container {
      height: 60px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      background-color: v-bind('settingsStore.theme === "dark" ? "#1d1e1f" : (settingsStore.sidebarStyle === "light" ? "#ffffff" : "#304156")');
      
      .logo-icon {
        flex-shrink: 0;
      }
      
      .logo-text {
        color: #fff;
        font-size: 18px;
        margin-left: 12px;
        font-weight: 600;
        white-space: nowrap;
        
        &.light {
          color: #303133;
        }
      }
    }

    :deep(.el-menu) {
      border-right: none;

      // 一级菜单样式
      .el-menu-item, .el-sub-menu__title {
        height: 56px;
        line-height: 56px;
        
        .el-icon {
          width: 24px;
          text-align: center;
          font-size: 18px;
          margin-right: 12px;
        }
      }

      // 激活状态
      .el-menu-item.is-active {
        background-color: v-bind('`${settingsStore.themeColor}1a`');
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 20px;
          background-color: v-bind('settingsStore.themeColor');
          border-radius: 0 4px 4px 0;
        }
      }

      // 悬停效果
      .el-menu-item:hover, .el-sub-menu__title:hover {
        background-color: v-bind('`${settingsStore.themeColor}0a`');
      }
    }
  }

  // 折叠状态样式
  :deep(.el-menu--collapse) {
    width: 64px;

    .el-menu-item, .el-sub-menu__title {
      padding: 0 20px !important;
      
      .el-icon {
        margin: 0 !important;
        width: 24px !important;
        text-align: center;
      }
    }

    // 隐藏文字和箭头
    .el-sub-menu__title span,
    .el-menu-item span,
    .el-sub-menu__title .el-sub-menu__icon-arrow {
      display: none;
    }
  }

  :deep(.el-scrollbar__view) {
    height: 100% !important;
  }

  // 子菜单样式
  :deep(.el-menu .el-menu) {
    background-color: v-bind('settingsStore.theme === "dark" ? "#181818" : (settingsStore.sidebarStyle === "light" ? "#ffffff" : "#263445")');
    .el-menu-item {
      height: 50px;
      line-height: 50px;
      
      &.is-active {
        background-color: v-bind('`${settingsStore.themeColor}1a`');
      }
    }
  }
  </style>